<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div class="gv-forms" layout="column">
  <div layout="row" layout-align="start end" class="gv-forms-header">
    <h1 ng-if="$ctrl.updateMode">{{$ctrl.clientRegistrationProvider.name}}</h1>
    <h1 ng-if="!$ctrl.updateMode">Create a new client registration provider</h1>
    <a ui-sref="management.settings.clientregistrationproviders.list">Back to client registration providers</a>
  </div>

  <form name="formClientRegistrationProvider" ng-submit="$ctrl.update()" novalidate>
    <div class="gv-form">
      <h2>General</h2>
      <div class="gv-form-content" layout="column">
        <div layout-gt-sm="row">
          <md-input-container class="md-block" flex-gt-sm>
            <label>Name</label>
            <input
              ng-model="$ctrl.clientRegistrationProvider.name"
              type="text"
              name="name"
              minlength="3"
              md-maxlength="50"
              required
              autofocus
            />
            <div class="hint" ng-if="formClientRegistrationProvider.name.$valid || formClientRegistrationProvider.name.$pristine">
              Client registration provider name.
            </div>
            <div ng-messages="formClientRegistrationProvider.name.$error">
              <div ng-message="required">Name is required.</div>
              <div ng-message="minlength">Name has to be more than 3 characters long.</div>
              <div ng-message="md-maxlength">Name has to be less than 50 characters long.</div>
            </div>
          </md-input-container>
        </div>

        <div layout-gt-sm="row">
          <md-input-container class="md-block" flex-gt-sm>
            <label>Description</label>
            <input ng-model="$ctrl.clientRegistrationProvider.description" type="text" name="description" />
            <div
              class="hint"
              ng-if="formClientRegistrationProvider.description.$valid || formClientRegistrationProvider.description.$pristine"
            >
              Provide a description to the client registration provider
            </div>
          </md-input-container>
        </div>
      </div>
    </div>

    <div class="gv-form">
      <h2>Configuration</h2>
      <div class="gv-form-content" layout="column">
        <h6>OpenID Connect - Dynamic Client Registration</h6>

        <md-input-container class="md-block" flex-gt-xs>
          <label>OpenID Connect Discovery Endpoint</label>
          <input ng-model="$ctrl.clientRegistrationProvider.discovery_endpoint" type="url" required />
        </md-input-container>

        <md-input-container class="md-block">
          <label>Initial Access Token Provider</label>
          <md-select ng-model="$ctrl.clientRegistrationProvider.initial_access_token_type" required>
            <md-option ng-value="initialAccessTokenType.value" ng-repeat="initialAccessTokenType in $ctrl.initialAccessTokenTypes">
              {{::initialAccessTokenType.name}}
            </md-option>
          </md-select>
          <div class="hint">Define the way the initial access token must be provided.</div>
        </md-input-container>

        <div ng-if="$ctrl.clientRegistrationProvider.initial_access_token_type === 'CLIENT_CREDENTIALS'">
          <md-input-container class="md-block" flex-gt-xs>
            <label>Client ID</label>
            <input ng-model="$ctrl.clientRegistrationProvider.client_id" type="text" required />
          </md-input-container>

          <md-input-container class="md-block" flex-gt-xs>
            <label>Client Secret</label>
            <input ng-model="$ctrl.clientRegistrationProvider.client_secret" type="text" required />
          </md-input-container>

          <md-input-container class="md-block" flex-gt-xs>
            <label>Scopes</label>
            <md-chips ng-model="$ctrl.clientRegistrationProvider.scopes" md-add-on-blur="true" placeholder="Add a scope"></md-chips>
            <div class="hint">Press Enter after writing your scope to save it.</div>
          </md-input-container>

          <md-input-container class="md-block" flex-gt-xs>
            <label>Client Template (software_id)</label>
            <input ng-model="$ctrl.clientRegistrationProvider.software_id" type="text" />
          </md-input-container>
        </div>

        <div ng-if="$ctrl.clientRegistrationProvider.initial_access_token_type === 'INITIAL_ACCESS_TOKEN'">
          <md-input-container class="md-block" flex-gt-xs>
            <label>Initial Access Token</label>
            <input ng-model="$ctrl.clientRegistrationProvider.initial_access_token" type="text" required />
          </md-input-container>
        </div>

        <h6>Renew client_secret (outside DCR specification)</h6>
        <md-input-container class="gv-input-container-dense">
          <md-checkbox ng-model="$ctrl.clientRegistrationProvider.renew_client_secret_support" aria-label="Renew client secret support">
            Enable renew client_secret support
          </md-checkbox>
        </md-input-container>

        <div layout="row">
          <md-input-container class="md-block">
            <label>HTTP Method</label>
            <md-select
              ng-model="$ctrl.clientRegistrationProvider.renew_client_secret_method"
              ng-required="$ctrl.clientRegistrationProvider.renew_client_secret_support"
            >
              <md-option ng-value="method" ng-repeat="method in $ctrl.renewClientSecretMethods"> {{::method}} </md-option>
            </md-select>
            <div class="hint">Define the HTTP method to call the renew secret endpoint</div>
          </md-input-container>

          <md-input-container class="md-block" flex-gt-xs>
            <label>Endpoint</label>
            <input
              ng-model="$ctrl.clientRegistrationProvider.renew_client_secret_endpoint"
              type="url"
              ng-required="$ctrl.clientRegistrationProvider.renew_client_secret_support"
            />
            <div class="hint">
              Provide an URL to reach the renew client secret endpoint, for example:
              http://authorization_server/oidc/dcr/{#client_id}/renew_secret
            </div>
          </md-input-container>
        </div>
      </div>
    </div>

    <div class="md-actions gravitee-api-save-button" layout="row">
      <md-button
        ng-if="$ctrl.updateMode"
        class="md-raised md-primary"
        type="submit"
        ng-disabled="formClientRegistrationProvider.$invalid || formClientRegistrationProvider.$pristine"
        permission
        permission-only="['environment-client_registration_provider-u']"
      >
        Update
      </md-button>
      <md-button
        ng-if="!$ctrl.updateMode"
        class="md-raised md-primary"
        type="submit"
        ng-disabled="formClientRegistrationProvider.$invalid || formClientRegistrationProvider.$pristine"
        permission
        permission-only="['environment-client_registration_provider-c']"
      >
        Create
      </md-button>

      <md-button
        class="md-raised"
        type="button"
        ng-click="$ctrl.reset()"
        permission
        permission-only="['environment-client_registration_provider-u']"
        ng-disabled="formClientRegistrationProvider.$invalid || formClientRegistrationProvider.$pristine"
      >
        Reset
      </md-button>
    </div>
  </form>
</div>
